<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="./jquery/jquery-1.12.4.min.js"></script>
<style>
    .box {
        width: 100px;
        height: 100px;
        background-color: red;
    }
</style>

<body>
    <!-- 
        jquery1版本兼容ie低版本，jquery的版本越高兼容性越差
     -->
    <!-- 基本选择器 -->
    <div class="box">
        <div class="inner">inner</div>
    </div>
    <div id="box1"></div>
    <p>test*</p>
    <ul>
        <li>111</li>
        <li class="item2">222</li>
        <!-- <span>444</span> -->
        <li>333</li>
        <span>444</span>
        <li>55</li>
    </ul>
    <script>
        // jquery对象
        console.log($('.box'));
        console.log($('.box')[0]);
        // 当前元素对象
        console.log(document.querySelector('.box'));

        // id
        console.log($('#box1'));
        // 标签选择器
        console.log($('div'));
        // * 通配符
        console.log($('*'));
        // 
        console.log($('.box>.inner'));
        console.log($('.box,#box1'));

        console.log($('ul li'));
        // 匹配当前元素的下一个元素
        console.log($('.item2+li'));
        // 匹配当前元素的后面所有的元素
        console.log($('.item2~li'));

    </script>
</body>

</html>